<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/load.js"></script>
    <!-- <script>
        // 加载到当前脚本时 -> body内的html结构还没有加载出来 -> 此时无法获取元素 -> [][0] ->  undefined -> undefind.onclick -> 报错
        // var box = document.getElementsByClassName("box")[0];
        // console.log(box);

        // box.onclick = function () {
        //     alert(11111);
        // }
            
        // window.onload 页面加载事件

        // 页面加载时绑定加载事件  -> 等到页面所有内容加载完毕后执行(文档 css 图片 脚本 font)

        console.log(1);

        window.onload = function(){  // 事件中的代码 会在页面所有内容加载完毕之后执行
            var box = document.getElementsByClassName("box")[0];
            console.log(2);
            // console.log(box);
            
            box.onclick = function () {
                alert(11111);
            }
        }

        console.log(3);

    </script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<!-- <script>

    var box = document.getElementsByClassName("box")[0];
    console.log(box);

    box.onclick = function(){
        alert(11111);
    }



</script> -->

</html>